<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>回复查询页面</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.10.0/font/bootstrap-icons.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        /* 按钮形状 */
        .operation_btn {
            width: 30%;
            height: 100%;
            display: flex;
            justify-content: center;
        }

        #operation_btns> :first-child {
            background-color: #e8f5ee;
            color: #3dbc7d;
            border: solid 1px #3dbc7d;
        }

        #operation_btns> :first-child:hover {
            background-color: rgb(207, 239, 219);
            cursor: pointer;
        }

        #operation_btns> :first-child:active {
            background-color: rgb(148, 215, 169);
        }

        #operation_btns> :nth-child(2) {
            background-color: #fef8ec;
            color: #f6d69f;
            border: solid 1px #f6d69f;
        }

        #operation_btns> :nth-child(2):hover {
            background-color: rgb(248, 231, 215);
            cursor: pointer;
        }

        #operation_btns> :nth-child(2):active {
            background-color: rgb(220, 174, 132);
        }

        #operation_btns> :nth-child(3) {
            background-color: #fff4f2;
            color: #ebb7b7;
            border: solid 1px #ebb7b7;
        }

        #operation_btns> :nth-child(3):hover {
            background-color: rgb(255, 226, 226);
            cursor: pointer;
        }

        #operation_btns> :nth-child(3):active {
            background-color: rgb(227, 159, 159);
        }
    </style>
    <style>
        #length_options>* {
            padding: 5px;
            margin-bottom: 5px;
            border: 1px solid #ccc;
            cursor: pointer;
        }

        #length_options>*.selected {
            background-color: #ccc;
        }

        #adopt_options>* {
            padding: 5px;
            margin-bottom: 5px;
            border: 1px solid #ccc;
            cursor: pointer;
        }

        #adopt_options>*.selected {
            background-color: #ccc;
        }
    </style>
    <style>
        #attitude_options .radioOption {
            border: solid 1px #c3c3c3;
            text-align: center;
            color: #c3c3c3;
            border-radius: 8px;
            width: 20%;
        }
    </style>
    <style>
        * {
            user-select: none;
        }
    </style>
</head>

<body style="padding: 0; margin: 0; width: 100vw; height: 100vh; display: flex; flex-direction: column">
    <div style="margin: 10px auto 10px 2%; font-size: 20px">
        <i class="bi bi-list"></i>
        <span>评论回复</span>
    </div>
    <div id="root"
        style="display: flex; flex: 1; justify-content: space-evenly; align-items: center; width: 100%; height: 95%">
        <div id="left_block" style="display: flex; flex-direction: column; justify-content: space-evenly;width: 48%; height: 98%;
                border: solid 1px #a2a2a2; border-radius: 8px">
            <!--标题栏-->
            <div id="left_title"
                style="display: flex; background-color: #f3f3f3;width: 100%; border-radius: 8px 8px 0 0">
                <div style="margin: 10px auto 10px 10px">主题分析</div>
            </div>
            <!--表单-->
            <form id="form1" style="width: 100%; flex-grow: 1; display: flex; flex-direction: column" method="POST"
                action="http://139.180.201.79:5000/analyse">
                <!--搜索框-->
                <div class="input-group mb-3" style="width: 95%; margin: 20px auto 10px auto;">
                    <button class="btn btn-light" type="button" id="button-addon1" style="border: solid 1px #a3a3a3"
                        onclick="query_tweet()">
                        <i class="bi bi-search" style="margin: auto 5px auto 10px"></i>
                    </button>
                    <input id="query-text" type="text" class="form-control" placeholder="try typing 'new'">
                </div>
                <!--推文输入-->
                <div style="user-select: none; margin: 10px auto 10px 3%">推文输入:</div>
                <textarea id="tweet" style="width: 95%; flex: 1; margin: 10px auto 10px auto;" class="form-control"
                    aria-label="With textarea"></textarea>
                <!--评论输入-->
                <div style="user-select: none; margin: 10px auto 10px 3%">评论输入:</div>
                <textarea id="comment" style="width: 95%; flex: 1;margin: 10px auto 10px auto;" class="form-control"
                    aria-label="With textarea"></textarea>
                <!--若干选择-->
                <div id="options" style="width: 92%; height: 20%; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center;
                        margin: 0 auto;">
                    <!--国家选择-->
                    <div style="display: flex; width: 100%; font-size: 15px;">
                        <div
                            style="width: 10%; white-space: nowrap; text-align: right;  margin: auto 20px auto 0; user-select: none">
                            国家选择:
                        </div>
                        <select id="country-select" class="form-select" aria-label="Default select example"
                            style="flex: 1">
                            <option selected>Open this select menu</option>
                            <option value="America">America</option>
                            <option value="Britain">Britain</option>
                            <option value="China">China</option>
                            <option value="France">France</option>
                            <option value="Germany">Germany</option>
                            <option value="Japan">Japan</option>
                        </select>
                    </div>
                    <!--两个选择-->
                    <div style="width: 100%; display: flex; justify-content: space-evenly">
                        <!--平台选择-->
                        <div style="display: flex; width: 100%; font-size: 15px;">
                            <div
                                style="width: 20%; white-space: nowrap; text-align: right;  margin: auto 20px auto 0; user-select: none">
                                平台选择:
                            </div>
                            <div class="btn-group">
                                <input type="radio" id="platform_option1" name="platform_options" class="btn-check"
                                    autocomplete="off" value="Tweet">
                                <label class="btn btn-outline-secondary" for="platform_option1">Tweet</label>

                                <input type="radio" id="platform_option2" name="platform_options" class="btn-check"
                                    autocomplete="off" value="Sina">
                                <label class="btn btn-outline-secondary" for="platform_option2">Sina</label>
                            </div>
                        </div>
                        <!--模型选择-->
                        <div style="display: flex; width: 100%; font-size: 15px;">
                            <div
                                style="white-space: nowrap; text-align: right; margin: auto 20px auto 0; user-select: none">
                                模型选择:
                            </div>
                            <div class="btn-group">
                                <input type="radio" id="model_option1" name="model_options" class="btn-check"
                                    autocomplete="off" value="gpt-3.5">
                                <label class="btn btn-outline-secondary" for="model_option1">Chatgpt</label>

                                <input type="radio" id="model_option2" name="model_options" class="btn-check"
                                    autocomplete="off" value="chatglm-130b">
                                <label class="btn btn-outline-secondary" for="model_option2">Chatglm</label>
                            </div>
                        </div>
                    </div>
                </div>

                <!--操作选项-->
                <div id="operation_btns"
                    style="width: 92%; display: flex;justify-content: space-between;align-items: center;user-select:None; margin: auto">
                    <div class="btn operation_btn" id="analyse-button" value="analyse" onclick="analysebox()">
                        <div>分析</div>
                    </div>
                    <div class="btn operation_btn" id="flush-button-left" value="flush"
                        onclick="handleOperation_left('flush')">
                        <div>刷新</div>
                    </div>
                    <!-- <div class="btn operation_btn" id="copy-button-left" value="copy"
                        onclick="handleOperation_left('copy')">
                        <div>备份</div>
                    </div> -->
                </div>

                <!--term-->
                <div style="display: flex; width: 92%; font-size: 15px; margin: 10px auto 10px auto">
                    <div
                        style="width: 10%; white-space: nowrap; text-align: right; margin: auto 20px auto 0; user-select: none">
                        term:
                    </div>
                    <button id="term" type="text" class="form-control" style="flex: 1">
                </div>

                <!--Category-->
                <div style="display: flex; width: 92%; font-size: 15px; margin: 10px auto 10px auto">
                    <div
                        style="width: 10%; white-space: nowrap; text-align: right; margin: auto 20px auto 0; user-select: none">
                        category:
                    </div>
                    <button id="category" type="text" class="form-control" style="flex: 1">
                </div>

                <!--apect-->
                <div style="display: flex; width: 92%; font-size: 15px; margin: 10px auto 10px auto">
                    <div
                        style="width: 10%; white-space: nowrap; text-align: right; margin: auto 20px auto 0; user-select: none">
                        aspect:
                    </div>
                    <textarea id="aspect" type="text" class="form-control" style="flex: 1"></textarea>
                </div>
            </form>
        </div>

        <div id="right_block" style="display: flex; flex-direction: column; justify-content: space-evenly;width: 48%; height: 98%;
                border: solid 1px #a2a2a2; border-radius: 8px">
            <!--标题栏-->
            <div id="right_title"
                style="display: flex; align-items: center; background-color: #f3f3f3;width: 100%; border-radius: 8px 8px 0 0">
                <div style="margin: 10px 5px 10px 10px">文本回复</div>
                <!-- <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch" id="identitySet">
                    <label class="form-check-label" for="identitySet" id="identitySet_label">启用身份集</label>
                </div> -->
            </div>
            <!--表单-->
            <form id="form2" method="POST" action="http://139.180.201.79:5000/submit"
                style="width: 100%; flex: 1; display: flex; flex-direction: column; align-items: center">
                <!--身份-->
                <div id="identity_options"
                    style="display: flex; flex-direction: column; justify-content: space-between; width: 95%;margin: 10px auto 0 auto;">
                    <div style="display: flex; ">
                        <div
                            style="width: 20%; white-space: nowrap; text-align: right;  margin: auto 20px auto 0; user-select: none">
                            身份选择:
                        </div>
                        <select id="identity-select" class="form-select" aria-label="Default select example"
                            style="flex: 1">
                            <option value=""></option>
                            <option value="Political commentator">🗣️ Political commentator</option>
                            <option value="Rapper">🎤 Rapper</option>
                            <option value="Fallacy Finder">🕵️‍♂️ Fallacy Finder</option>
                            <option value="Drunk Person">🤪 Drunk Person</option>
                            <option value="Internet influencer">👨‍💻 Internet influencer</option>
                            <option value="Sports journalist">🏀 Sports journalist</option>
                            <option value="Investigative journalist">🕵️‍♀️ Investigative journalist</option>
                            <option value="Philosopher">🧐 Philosopher</option>
                        </select>
                    </div>
                </div>
                <!--态度-->
                <div id="attitude_options"
                    style="display: flex; flex-direction: column; justify-content: space-between; width: 95%;margin: 10px auto 0 auto;">
                    <div style="display: flex; ">
                        <div
                            style="width: 20%; white-space: nowrap; text-align: right;  margin: auto 20px auto 0; user-select: none">
                            态度选择:
                        </div>
                        <select id="attitude-select" class="form-select" aria-label="Default select example"
                            style="flex: 1">
                            <option value=""></option>
                            <option value="Formal">📝 Formal</option>
                            <option value="Humorous">🤣 Humorous</option>
                            <option value="Enthusiastic">🔥 Enthusiastic</option>
                            <option value="Intense">💥 Intense</option>
                            <option value="Serene">🧘‍♀️ Serene</option>
                            <option value="Sarcastic">🙄 Sarcastic</option>
                        </select>
                    </div>
                </div>
                                <!--态度-->
                                <div id="language_options"
                                style="display: flex; flex-direction: column; justify-content: space-between; width: 95%;margin: 10px auto 0 auto;">
                                <div style="display: flex; ">
                                    <div
                                        style="width: 20%; white-space: nowrap; text-align: right;  margin: auto 20px auto 0; user-select: none">
                                        回复语言选择:
                                    </div>
                                    <select id="language-select" class="form-select" aria-label="Default select example"
                                        style="flex: 1">
                                        <option value=""></option>
                                        <option value="Chineae">Chinese</option>
                                        <option value="English">English</option>
                                        <option value="Japanese">Japanese</option>
                                        <option value="German">German</option>
                                        <option value="Korean">Korean</option>
                                        <option value="Russian">Russian</option>
                                    </select>
                                </div>
                            </div>
                <!--长度选择-->
                <div style="display: flex; width: 95%; font-size: 15px; margin: 10px auto 0 auto">
                    <div
                        style="width: 20%; white-space: nowrap; text-align: right;  margin: auto 20px auto 0; user-select: none">
                        长度选择:
                    </div>
                    <div id="length_options"
                        style="display:flex;justify-content: space-evenly;flex: 1;max-width: 80%;text-align: center">
                        <div class="radioOption len_class selected" id=">30" onclick="lengthSelection('>30')"
                            style="width: 45%; color: #6297c2; border-color: #c2d1d6; background-color: #edf6fd">>30
                        </div>
                        <div class="radioOption len_class" id="<=30" onclick="lengthSelection('<=30')"
                            style="width: 45%">
                            <=30 </div>
                        </div>
                    </div>
                    <!--argument-->
                    <div style="display: flex; width: 95%; font-size: 15px; margin: 10px auto 0 auto">
                        <div
                            style="width: 20%; white-space: nowrap; text-align: right;  margin: auto 20px auto 0; user-select: none">
                            采用领域知识:
                        </div>
                        <div id="adopt_options"
                            style="display:flex;justify-content: space-evenly;flex: 1;max-width: 80%;text-align: center">
                            <div class="radioOption adopt_class selected" id="Yes" onclick="adoptSelection('Yes')"
                                style="width: 45%; color: #efd8a3; border-color: #f0e8cb; background-color: #fef8ec">Yes
                            </div>
                            <div class="radioOption adopt_class" id="No" onclick="adoptSelection('No')"
                                style="width: 45%">No
                            </div>
                        </div>
                    </div>
                    <!--角色设定-->
                    <div style="display: flex; width: 95%; font-size: 15px;margin: 10px auto">
                        <div
                            style="width: 20%; white-space: nowrap; text-align: right;  margin: auto 20px auto 0; user-select: none">
                            角色选择:
                        </div>
                        <select id="character-setting" class="form-select" aria-label="Default select example"
                            style="flex: 1">
                            <option selected></option>
                            <option value="Sharp columnist">Sharp columnist</option>
                            <option value="Sarcastic Comedian">Sarcastic Comediann</option>
                            <option value="Empathetic Psychological counselors">Empathetic Psychological counselors
                            </option>
                            <option value="Calm Sociologist">Calm Sociologist</option>
                            <option value="Angry Victim">Angry Victim</option>
                            <option value="Peace-loving Female College Student">Peace-loving Female College Student
                            </option>
                            <option value="Tony Stark">Tony Stark</option>
                            <option value="Sheldon Cooper">Sheldon Cooper</option>
                            <option value="Sherlock Holmes">Sherlock Holmes</option>
                            <option value="Miranda Priestly">Miranda Priestly</option>
                            <option value="Deadpool">Deadpool</option>
                            <option value="Jay Gatsby">Jay Gatsby</option>
                            <option value="Daenerys Targaryen">Daenerys Targaryen</option>
                        </select>
                    </div>
                    <!--操作选项-->
                    <div id="operation_btns"
                        style="width: 92%; display: flex;justify-content: space-between;align-items: center;user-select:None; margin: auto">
                        <div class="btn operation_btn" id="submit-button" value="submit" onclick="submitbox()">
                            <div>提交</div>
                        </div>
                        <div class="btn operation_btn" id="flush-button-right" value="flush"
                            onclick="handleOperation_right('flush')">
                            <div>刷新</div>
                        </div>
                        <!-- <div class="btn operation_btn" id="copy-button-right" value="copy"
                            onclick="handleOperation_right('copy')">
                            <div>备份</div>
                        </div> -->
                    </div>
                    <!--回复框？-->
                    <!-- <div id="chat-container" style="width: 95%; flex: 1; margin: 10px auto 10px auto;"
                        class="form-control">
                        <div class="input-group mb-3" style="width: 95%; margin: 20px auto 10px auto;">
                            <button class="btn btn-light" type="button" id="button-send"
                                style="border: solid 1px #a3a3a3" onclick="newgenerate()">
                                <i class="bi bi-envelope" style="margin: auto 5px auto 10px"></i>
                            </button>
                            <input id="user-text" type="text" class="form-control" placeholder="如果不满意，请在这里输入你的想法">
                        </div>
                    </div> -->
                    <div id="chat"
                        style="width: 95%; height:300px;flex: 1; margin: 10px auto; display: flex; flex-direction: column;"
                        class="form-control">
                        <div id="chat-container"
                            style="width: 95%;height:75%; flex: 1; margin: 10px auto; display: flex; flex-direction: column;overflow-y: auto;">
                        </div>
                        <div class="input-group mb-3" style="width: 95%; margin: 20px auto 10px auto;">
                            <input id="user-text" type="text" class="form-control" placeholder="如果不满意，请在这里输入你的想法">
                            <button class="btn btn-light" type="button" id="button-send"
                                style="border: solid 1px #a3a3a3" onclick="newgenerate()">
                                <i class="bi bi-envelope" style="margin: auto 5px auto 10px"></i>
                            </button>
                        </div>
                    </div>

            </form>
        </div>
    </div>

    <script>
        function newgenerate() {
            // console.log('111');
            // // 获取提交按钮的 DOM 元素
            // var submitButton = document.getElementById('submit-button');
            // 生成用户聊天框
            // 创建聊天记录元素
            var userText = document.getElementById('user-text').value;
            var chatContaineruser = document.getElementById('chat-container');
            var chatElement = document.createElement('div');
            chatElement.className = 'chat-record';
            chatElement.style.display = 'flex';
            chatElement.style.justifyContent = 'flex-end';
            chatElement.style.marginBottom = '10px';
            // chatElement.style.alignItems = 'center';
            // 创建头像元素
            var avatarElement = document.createElement('img');
            avatarElement.src = '/static/resource/pics/user.jpg'; // 这里替换成头像的URL
            avatarElement.className = 'avatar';
            avatarElement.style.width = '30px';
            avatarElement.style.height = '30px';
            avatarElement.style.borderRadius = '100%';
            // 创建聊天气泡元素
            var chatBubbleElement = document.createElement('div');
            chatBubbleElement.className = 'chat-bubble-user';
            chatBubbleElement.innerText = userText; // 设置聊天信息
            var inputElement = document.getElementById("user-text");
            inputElement.value = "";
            // document.getElementById('user-text').placeholder = "如果不满意，请在这里输入你的想法";// 输入框恢复默认
            chatBubbleElement.style.margin = '0px 5px';
            chatBubbleElement.style.backgroundColor = '#fff4f2';
            chatBubbleElement.style.border = 'solid 1px #ebb7b7';
            chatBubbleElement.style.color = '#ebb7b7';
            chatBubbleElement.style.borderRadius = '10px';
            // 将头像和聊天气泡添加到聊天记录元素中
            chatElement.appendChild(chatBubbleElement);
            chatElement.appendChild(avatarElement);
            // 将聊天记录元素添加到聊天容器中
            chatContaineruser.appendChild(chatElement);

            // 获取用户输入的值
            var tweetText = document.getElementById('tweet').value;
            var commentText = document.getElementById('comment').value;
            var platformSelect = document.querySelector('input[name="platform_options"]:checked').value;
            var attitudeSelect = document.getElementById('attitude-select').value;
            var identityOption = document.getElementById('identity-select');
            if (identityOption) {
                identitySelect = identityOption.value;
            }
            else {
                identitySelect = '';
            }
            var countrySelect = document.getElementById('country-select').value;
            var aspectSelect = document.getElementById('aspect').value;
            var lengthSelect = document.querySelector('.len_class.selected').getAttribute('id');
            var characterOption = document.getElementById('character-setting');
            var languageSelect = document.getElementById('language-select').value;
            // 获取所有的聊天记录
            // 获取所有 class 为 "chat-record" 的元素
            var chatRecords = document.getElementsByClassName('chat-record');

            // 初始化空数组用于存储聊天泡泡的内容和标记
            var chatBubbleList = [];

            // 遍历每个 "chat-record" 元素，并提取子元素
            for (var i = 0; i < chatRecords.length; i++) {
                var chatRecord = chatRecords[i];

                // 获取子元素的 class 为 "chat-bubble-system" 和 "chat-bubble-user"
                var bubbleSystem = chatRecord.querySelector('.chat-bubble-system');
                var bubbleUser = chatRecord.querySelector('.chat-bubble-user');

                // 判断并存储到列表中
                if (bubbleSystem) {
                    var bubbleContent = bubbleSystem.textContent;
                    chatBubbleList.push({ type: 'assistant', content: bubbleContent });
                }

                if (bubbleUser) {
                    var bubbleContent = bubbleUser.textContent;
                    chatBubbleList.push({ type: 'user', content: bubbleContent });
                }
            }

            // 打印结果（可选）
            console.log(chatBubbleList);

            if (characterOption) {
                characterSelect = characterOption.value;
            }
            else {
                characterSelect = '';
            }
            var modelSelect = document.querySelector('input[name="model_options"]:checked').value;
            var argumentSelect = document.querySelector('.adopt_class.selected').getAttribute('id');
            // 创建 XMLHttpRequest 对象
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                    // 创建聊天记录元素
                    var chatContainersys = document.getElementById('chat-container');
                    var chatElement = document.createElement('div');
                    chatElement.className = 'chat-record';
                    chatElement.style.display = 'flex';
                    chatElement.style.justifyContent = 'start';
                    chatElement.style.marginBottom = '10px';
                    // chatElement.style.alignItems = 'center';
                    // 创建头像元素
                    var avatarElement = document.createElement('img');
                    avatarElement.src = '/static/resource/pics/assistant.jpeg'; // 这里替换成头像的URL
                    avatarElement.className = 'avatar';
                    avatarElement.style.width = '30px';
                    avatarElement.style.height = '30px';
                    avatarElement.style.borderRadius = '100%';
                    // 创建聊天气泡元素
                    var chatBubbleElement = document.createElement('div');
                    chatBubbleElement.className = 'chat-bubble-system';
                    chatBubbleElement.innerText = JSON.parse(xhr.responseText); // 设置聊天信息
                    chatBubbleElement.style.margin = '0px 5px';
                    chatBubbleElement.style.backgroundColor = '#e8f5ee';
                    chatBubbleElement.style.border = 'solid 1px #3dbc7d';
                    chatBubbleElement.style.color = '#3dbc7d';
                    chatBubbleElement.style.borderRadius = '10px';
                    // 将头像和聊天气泡添加到聊天记录元素中
                    chatElement.appendChild(avatarElement);
                    chatElement.appendChild(chatBubbleElement);

                    // 将聊天记录元素添加到聊天容器中
                    chatContainersys.appendChild(chatElement);
                }
            };

            // 发送 POST 请求
            xhr.open('POST', 'http://139.180.201.79:5000//newGenerate'); // 将路径替换成您的后台处理请求的路径
            xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');

            xhr.send(JSON.stringify({
                tweetText: tweetText,
                commentText: commentText,
                countrySelect: countrySelect,
                platformSelect: platformSelect,
                aspectSelect: aspectSelect,
                characterSelect: characterSelect,
                attitudeSelect: attitudeSelect,
                lengthSelect: lengthSelect,
                identitySelect: identitySelect,
                modelSelect: modelSelect,
                argumentSelect: argumentSelect,
                conversation: chatBubbleList,
                languageSelect: languageSelect,
            }));
        }

        // var aspectText = '';
        function submitbox() {
            console.log('111');
            // 获取提交按钮的 DOM 元素
            var submitButton = document.getElementById('submit-button');

            // 获取用户输入的值
            var tweetText = document.getElementById('tweet').value;
            var commentText = document.getElementById('comment').value;
            var platformSelect = document.querySelector('input[name="platform_options"]:checked').value;
            var attitudeSelect = document.getElementById('attitude-select').value;
            var identityOption = document.getElementById('identity-select');
            var languageSelect = document.getElementById('language-select').value;
            if (identityOption) {
                identitySelect = identityOption.value;
            }
            else {
                identitySelect = '';
            }
            var countrySelect = document.getElementById('country-select').value;
            var aspectSelect = document.getElementById('aspect').value;
            var lengthSelect = document.querySelector('.len_class.selected').getAttribute('id');
            var characterOption = document.getElementById('character-setting');
            if (characterOption) {
                characterSelect = characterOption.value;
            }
            else {
                characterSelect = '';
            }
            var modelSelect = document.querySelector('input[name="model_options"]:checked').value;
            var argumentSelect = document.querySelector('.adopt_class.selected').getAttribute('id');
            // var chatRecord = document.getElementsByClassName('chat-record')
            // 创建 XMLHttpRequest 对象
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                    // 创建聊天记录元素
                    var chatRecordsys = document.getElementById('chat-container');
                    var chatElement = document.createElement('div');
                    chatElement.className = 'chat-record';
                    chatElement.style.display = 'flex';
                    chatElement.style.justifyContent = 'start';
                    chatElement.style.marginBottom = '10px';
                    // chatElement.style.alignItems = 'center';
                    // 创建头像元素
                    var avatarElement = document.createElement('img');
                    avatarElement.src = '/static/resource/pics/assistant.jpeg'; // 这里替换成头像的URL
                    avatarElement.className = 'avatar';
                    avatarElement.style.width = '30px';
                    avatarElement.style.height = '30px';
                    avatarElement.style.borderRadius = '100%';
                    // 创建聊天气泡元素
                    var chatBubbleElement = document.createElement('div');
                    chatBubbleElement.className = 'chat-bubble-system';
                    chatBubbleElement.innerText = xhr.responseText; // 设置聊天信息
                    chatBubbleElement.style.margin = '0px 5px';
                    chatBubbleElement.style.backgroundColor = '#e8f5ee';
                    chatBubbleElement.style.border = 'solid 1px #3dbc7d';
                    chatBubbleElement.style.color = '#3dbc7d';
                    chatBubbleElement.style.borderRadius = '10px';
                    // 将头像和聊天气泡添加到聊天记录元素中
                    chatElement.appendChild(avatarElement);
                    chatElement.appendChild(chatBubbleElement);

                    // 将聊天记录元素添加到聊天容器中
                    chatRecordsys.appendChild(chatElement);
                }
            };

            // 发送 POST 请求
            xhr.open('POST', 'http://139.180.201.79:5000//submit'); // 将路径替换成您的后台处理请求的路径
            xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');

            xhr.send(JSON.stringify({
                tweetText: tweetText,
                commentText: commentText,
                countrySelect: countrySelect,
                platformSelect: platformSelect,
                aspectSelect: aspectSelect,
                characterSelect: characterSelect,
                attitudeSelect: attitudeSelect,
                lengthSelect: lengthSelect,
                identitySelect: identitySelect,
                modelSelect: modelSelect,
                argumentSelect: argumentSelect,
                languageSelect:languageSelect,
            }));
        }

        function analysebox() {
            // 获取分析按钮和结果文本框的 DOM 元素
            var analyseButton = document.getElementById('analyse-button');
            var aspectText = document.getElementById('aspect');

            // 获取用户输入的值
            var tweetText = document.getElementById('tweet').value;
            var commentText = document.getElementById('comment').value;
            var countrySelect = document.getElementById('country-select').value;
            var platformSelect = document.querySelector('input[name="platform_options"]:checked').value;
            var modelSelect = document.querySelector('input[name="model_options"]:checked').value;
            // console.log(tweetText,commentText,countrySelect,platformSelect,modelSelect)
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                    // 将返回的字符串解析成 JSON 对象
                    var responseJson = JSON.parse(xhr.responseText);
                    console.log(responseJson)
                    // 获取各个属性的值
                    var aspectTermPositiveList = responseJson.aspect_term_positive;
                    var aspectCategoryPositiveList = responseJson.aspect_category_positive;
                    var aspectTermNegativeList = responseJson.aspect_term_negative;
                    var aspectCategoryNegativeList = responseJson.aspect_category_negative;
                    // 将值添加到按钮上
                    console.log(aspectCategoryNegativeList);
                    var aspectTermBtn = document.getElementById('term');
                    var aspectCategoryBtn = document.getElementById('category');

                    for (let i = 0; i < aspectTermPositiveList.length; i++) {
                        const btnEl = document.createElement('button');
                        btnEl.id = `${aspectTermPositiveList[i]}Btn`;
                        btnEl.className = 'term-btn';
                        btnEl.innerHTML = aspectTermPositiveList[i];

                        // 设置按钮样式
                        btnEl.style.backgroundColor = '#e8f5ee';
                        btnEl.style.color = '#3dbc7d';
                        btnEl.style.border = 'solid 1px #3dbc7d';
                        btnEl.style.marginRight = "5px";
                        btnEl.style.borderRadius = "5px";
                        // 鼠标悬停样式
                        btnEl.addEventListener('mouseenter', function () {
                            btnEl.style.backgroundColor = 'rgb(207, 239, 219)';
                            btnEl.style.cursor = 'pointer';
                        });

                        // 鼠标离开样式
                        btnEl.addEventListener('mouseleave', function () {
                            btnEl.style.backgroundColor = '#e8f5ee';
                            btnEl.style.cursor = 'default';
                        });

                        // 鼠标按下样式
                        btnEl.addEventListener('mousedown', function () {
                            btnEl.style.backgroundColor = 'rgb(148, 215, 169)';
                        });
                        // 点击按钮之后消失
                        btnEl.onclick = function () {
                            // event.stopPropagation();
                            event.preventDefault();
                            console.log("点击positive-term");
                            var aspectString = 'positive term:' + btnEl.innerHTML + '; ';
                            aspectText.value += aspectString;
                            btnEl.style.display = "none";
                        }
                        aspectTermBtn.appendChild(btnEl);
                    }
                    for (let i = 0; i < aspectTermNegativeList.length; i++) {
                        const btnEl = document.createElement('button');
                        btnEl.id = `${aspectTermNegativeList[i]}Btn`;
                        btnEl.className = 'term-btn';
                        btnEl.innerHTML = aspectTermNegativeList[i];
                        btnEl.style.marginRight = "5px";
                        btnEl.style.borderRadius = "5px";
                        // 设置按钮样式
                        btnEl.style.backgroundColor = '#fff4f2';
                        btnEl.style.color = '#ebb7b7';
                        btnEl.style.border = 'solid 1px #ebb7b7';

                        // 鼠标悬停样式
                        btnEl.addEventListener('mouseenter', function () {
                            btnEl.style.backgroundColor = 'rgb(255, 226, 226)';
                            btnEl.style.cursor = 'pointer';
                        });

                        // 鼠标离开样式
                        btnEl.addEventListener('mouseleave', function () {
                            btnEl.style.backgroundColor = '#fff4f2';
                            btnEl.style.cursor = 'default';
                        });

                        // 鼠标按下样式
                        btnEl.addEventListener('mousedown', function () {
                            btnEl.style.backgroundColor = 'rgb(227, 159, 159)';
                        });

                        btnEl.onclick = function () {
                            event.preventDefault();
                            var aspectString = 'negative term:' + btnEl.innerHTML + '; ';
                            aspectText.value += aspectString;
                            btnEl.style.display = "none";
                        }
                        aspectTermBtn.appendChild(btnEl);
                    }
                    for (let i = 0; i < aspectCategoryPositiveList.length; i++) {
                        const btnEl = document.createElement('button');
                        btnEl.id = `${aspectCategoryPositiveList[i]}Btn`;
                        btnEl.className = 'category-btn';
                        btnEl.innerHTML = aspectCategoryPositiveList[i];

                        // 设置按钮样式
                        btnEl.style.backgroundColor = '#e8f5ee';
                        btnEl.style.color = '#3dbc7d';
                        btnEl.style.border = 'solid 1px #3dbc7d';
                        btnEl.style.marginRight = "5px";
                        btnEl.style.borderRadius = "5px";
                        // 鼠标悬停样式
                        btnEl.addEventListener('mouseenter', function () {
                            btnEl.style.backgroundColor = 'rgb(207, 239, 219)';
                            btnEl.style.cursor = 'pointer';
                        });

                        // 鼠标离开样式
                        btnEl.addEventListener('mouseleave', function () {
                            btnEl.style.backgroundColor = '#e8f5ee';
                            btnEl.style.cursor = 'default';
                        });

                        // 鼠标按下样式
                        btnEl.addEventListener('mousedown', function () {
                            btnEl.style.backgroundColor = 'rgb(148, 215, 169)';
                        });

                        btnEl.onclick = function () {
                            event.preventDefault();
                            var aspectString = 'positive category:' + btnEl.innerHTML + '; ';
                            aspectText.value += aspectString;
                            btnEl.style.display = "none";
                        }
                        aspectCategoryBtn.appendChild(btnEl);
                    }
                    for (let i = 0; i < aspectCategoryNegativeList.length; i++) {
                        console.log(233);
                        const btnEl = document.createElement('button');
                        btnEl.id = `${aspectCategoryNegativeList[i]}Btn`;
                        btnEl.className = 'category-btn';
                        btnEl.innerHTML = aspectCategoryNegativeList[i];
                        // 设置按钮样式
                        btnEl.style.backgroundColor = '#fff4f2';
                        btnEl.style.color = '#ebb7b7';
                        btnEl.style.border = 'solid 1px #ebb7b7';
                        btnEl.style.marginRight = "5px";
                        btnEl.style.borderRadius = "5px";
                        // 鼠标悬停样式
                        btnEl.addEventListener('mouseenter', function () {
                            btnEl.style.backgroundColor = 'rgb(255, 226, 226)';
                            btnEl.style.cursor = 'pointer';
                        });

                        // 鼠标离开样式
                        btnEl.addEventListener('mouseleave', function () {
                            btnEl.style.backgroundColor = '#fff4f2';
                            btnEl.style.cursor = 'default';
                        });

                        // 鼠标按下样式
                        btnEl.addEventListener('mousedown', function () {
                            btnEl.style.backgroundColor = 'rgb(227, 159, 159)';
                        });
                        btnEl.onclick = function () {
                            event.preventDefault();
                            var aspectString = 'negative category:' + btnEl.innerHTML + '; ';
                            aspectText.value += aspectString;
                            btnEl.style.display = "none";
                        }
                        aspectCategoryBtn.appendChild(btnEl);
                    }
                }
            };
            // 发送 POST 请求
            xhr.open('POST', 'http://139.180.201.79:5000//analyse'); // 将路径替换成您的后台处理请求的路径
            xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
            xhr.send(JSON.stringify({
                tweetText: tweetText,
                commentText: commentText,
                countrySelect: countrySelect,
                platformSelect: platformSelect,
                modelSelect: modelSelect,
            }));
        }
        function handleOperation_left(operation) {
            console.log("left" + operation)
            if (operation == "flush") {
                var form = document.getElementById("form1");

                // 循环遍历表单中的所有元素
                for (var i = 0; i < form.elements.length; i++) {
                    var element = form.elements[i];

                    // 检查元素类型，并设置默认值
                    switch (element.type) {
                        case "text":
                            element.value = '';
                        case "textarea":
                            element.value = '';
                        case "select-one":
                            element.value = element.defaultValue;
                            break;
                        case "checkbox":
                        case "radio":
                            element.checked = element.defaultChecked;
                            break;
                    }
                }
            }
        }

        function handleOperation_right(operation) {
            console.log("right" + operation)
            if (operation == "flush") {
                // var form = document.getElementById("form2");
                // 获取表单元素
                var form = document.getElementById("form2");
                form.reset()
                // 清空回复框
                // 获取 chat-container 元素的引用
                const chatContainer = document.getElementById('chat-container');
                // 使用 while 循环删除 chat-container 的子元素
                while (chatContainer.firstChild) {
                    chatContainer.removeChild(chatContainer.firstChild);
                }
            }
        }

        function identitySelection(optionId) {
            console.log(optionId)
            // 移除先前选中的选项样式
            let previousOption = document.querySelector('.identity_opts.selected');
            console.log(previousOption)
            console.log(previousOption.children)
            previousOption.querySelector('i').style.borderColor = '#e6e6e6'
            if (previousOption) {
                previousOption.classList.remove('selected');
            }

            // 添加选中的选项样式
            let selectedOption = document.getElementById(optionId);
            selectedOption.classList.add('selected');

            // 可以在这里执行其他操作，例如更新相关元素的内容或执行其他自定义逻辑
            selectedOption.querySelector('i').style.borderColor = '#71a5d4'
        }

        function attitudeSelection(optionId) {
            console.log(optionId)
            // 移除先前选中的选项样式
            let previousOption = document.querySelector('.attitude_opts.selected');
            if (previousOption) {
                previousOption.classList.remove('selected');
            }

            // 添加选中的选项样式
            console.log(previousOption)
            console.log(previousOption.children)
            previousOption.style.borderColor = '#c3c3c3'
            previousOption.style.backgroundColor = ''
            previousOption.style.color = '#c3c3c3'

            // 添加选中的选项样式
            let selectedOption = document.getElementById(optionId);
            selectedOption.classList.add('selected');

            // 可以在这里执行其他操作，例如更新相关元素的内容或执行其他自定义逻辑
            selectedOption.style.borderColor = '#c2d1d6'
            selectedOption.style.backgroundColor = '#edf6fd'
            selectedOption.style.color = '#6297c2'
        }

        function lengthSelection(optionId) {
            // 移除先前选中的选项样式
            let previousOption = document.querySelector('.len_class.selected');
            if (previousOption) {
                previousOption.classList.remove('selected');
            }

            // 添加选中的选项样式
            previousOption.style.borderColor = '#c3c3c3'
            previousOption.style.backgroundColor = ''
            previousOption.style.color = '#c3c3c3'

            // 添加选中的选项样式
            let selectedOption = document.getElementById(optionId);
            selectedOption.classList.add('selected');

            // 可以在这里执行其他操作，例如更新相关元素的内容或执行其他自定义逻辑
            selectedOption.style.borderColor = '#c2d1d6'
            selectedOption.style.backgroundColor = '#edf6fd'
            selectedOption.style.color = '#6297c2'
        }

        function adoptSelection(optionId) {
            // 移除先前选中的选项样式
            let previousOption = document.querySelector('.adopt_class.selected');
            if (previousOption) {
                previousOption.classList.remove('selected');
            }

            // 添加选中的选项样式
            previousOption.style.borderColor = '#c3c3c3'
            previousOption.style.backgroundColor = ''
            previousOption.style.color = '#c3c3c3'

            // 添加选中的选项样式
            let selectedOption = document.getElementById(optionId);
            selectedOption.classList.add('selected');

            // 可以在这里执行其他操作，例如更新相关元素的内容或执行其他自定义逻辑
            selectedOption.style.borderColor = '#f0e8cb'
            selectedOption.style.backgroundColor = '#fef8ec'
            selectedOption.style.color = '#efd8a3'
        }
        function query_tweet() {
            var query = document.getElementById('query-text');
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                    // 请求成功，将返回的结果设置成选择的格式
                    var resultQuery = xhr.responseText["result"];
                    selectElement = document.createElement('select')
                    resultQuery.forEach(result => {
                        const optionElement = document.createElement('option');
                        optionElement.value = result;
                        optionElement.textContent = result;
                        selectElement.appendChild(optionElement);
                    });
                }
            };

            // 发送 POST 请求
            xhr.open('POST', '/query_tweet'); // 将路径替换成您的后台处理请求的路径
            xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
            xhr.send(JSON.stringify({
                tweetKey: query,
            }));

        }
        // document.addEventListener('DOMContentLoaded', function () {

        //     let switchElement = document.getElementById('identitySet');
        //     let switchLabelElement = document.getElementById('identitySet_label');

        //     // 监听开关状态改变
        //     switchElement.addEventListener('change', function () {
        //         // 获取开关状态
        //         let isChecked = switchElement.checked;

        //         console.log(isChecked)

        //         // 根据开关状态更新文本内容
        //         if (isChecked) {
        //             console.log(isChecked)
        //             switchLabelElement.textContent = '启用身份集';
        //         } else {
        //             console.log(isChecked)
        //             switchLabelElement.textContent = '禁用身份集';
        //         }
        //     });
        // });
    </script>

</body>

</html>